import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import { BDP_TAB_TITLE } from './TabTitle';
import { BDP_TAB_CONTENT } from './TabContent';

import A from '../A';
import Footer from '../Box/Footer';

class Tabs extends React.Component {
	constructor() {
		super();

		this.state = {
			current: 0,
		};
	}

	onTabClick = (event, props) => {
		const { onTabChange } = this.props;
		const current = props['data-index'];
		const disabled = props['data-disabled'];

		if (disabled === true) return;

		if (this.state.current !== current) {
			this.setState({ current }, () => {
				if (onTabChange) onTabChange(this.getList()[current]);
			});
		}
	};

	getList = () => {
		const { list, children = [] } = this.props;
		if (list) return list;

		return React.Children.map(children, (node) => {
			// Filter useless component
			if (!node || !React.isValidElement(node) || !node.type) return null;

			if (node.type[BDP_TAB_CONTENT] === BDP_TAB_CONTENT) {
				const { content, children: nodeChildren, ...props } = node.props;
				return {
					content: content || nodeChildren,
					...props,
				};
			} else if (node.type[BDP_TAB_TITLE] === BDP_TAB_TITLE) {
				const { name, children: nodeChildren, ...props } = node.props;
				return {
					name: name || nodeChildren,
					disabled: true,
					...props,
				};
			}
			return null;
		}).filter(props => !!props);
	};

	getCurrentTab() {
		const { current } = this.state;
		const list = this.getList();
		return list[current];
	}

	setCurrentTab(index) {
		this.setState({ current: index });
	}

	render() {
		const {
			className, isPill, isBox, hasContent,
			toolBar, header, footer, loading, onlyOne,
		} = this.props;
		const { current } = this.state;
		const list = this.getList();
		let $content;

		if (hasContent !== false) {
			$content = (
				<div className="tab-content">
					{list.map((tab, index) => {
						const { content, className: tabClass } = tab;
						if (content && (!onlyOne || current === index)) {
							return (
								<div className={classNames('tab-pane', { active: current === index }, tabClass)} key={index}>
									{content}
								</div>
							);
						}
						return null;
					})}
				</div>
			);
		}

		let $header;
		if (header) {
			$header = <div className="box-body">{header}</div>;
		}

		let $footer;
		if (footer) {
			$footer = (footer.type || {})._isBoxFooter ? footer : <Footer>{footer}</Footer>;
		}

		const $loading = loading ? (
			<div className="overlay">
				<span className="fa fa-refresh fa-spin" />
			</div>
		) : null;

		return (
			<div className={classNames(className, 'bdp-tabs', isBox && 'nav-tabs-custom overlay-wrapper')}>
				<ul className={classNames('nav', isPill ? 'nav-pills' : 'nav-tabs')}>
					{list.map(({ name, disabled }, index) => (
						<li
							className={classNames({
								active: current === index,
								'tab-disabled': disabled,
							})}
							key={index}
						>
							<A
								role="button" onClick={this.onTabClick}
								data-index={index} data-disabled={disabled}
							>{name}</A>
						</li>
					))}
					{toolBar &&
						<div className="bdp-tabs-tools">{toolBar}</div>
					}
				</ul>
				{$header}
				{$content}
				{$footer}

				{$loading}
			</div>
		);
	}
}

Tabs.propTypes = {
	className: PropTypes.string,
	isPill: PropTypes.bool,
	isBox: PropTypes.bool,
	hasContent: PropTypes.bool,
	list: PropTypes.arrayOf(PropTypes.shape({
		name: PropTypes.node,
	})),
	toolBar: PropTypes.node,
	header: PropTypes.node,
	footer: PropTypes.node,
	loading: PropTypes.bool,
	children: PropTypes.node,
	onlyOne: PropTypes.bool,

	onTabChange: PropTypes.func,
};

export default Tabs;
